<template>
  <div>
    <label for="wordlist-select">选择词库：</label>
    <select id="wordlist-select" v-model="selected" @change="emitChange">
      <option v-for="item in wordlists" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

const wordlists = [
  { label: 'C++ 常用函数', value: 'cpp algorithm' },
  { label: 'C++ 容器', value: 'cpp container' },
  { label: 'Simulation Contest', value: 'Simulation contest' }
  // 未来可扩展更多词库
]

const selected = ref(wordlists[0].value)
const emit = defineEmits(['change'])

function emitChange () {
  emit('change', selected.value)
}

</script>
